<!--
 * Tencent is pleased to support the open source community by making BK-JOB蓝鲸智云作业平台 available.
 *
 * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
 *
 * BK-JOB蓝鲸智云作业平台 is licensed under the MIT License.
 *
 * License for BK-JOB蓝鲸智云作业平台:
 *
 *
 * Terms of the MIT License:
 * ---------------------------------------------------
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
 * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
 * the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
 * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
 * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
-->

<template>
    <div class="export-task-step3-page">
        <div class="form">
            <jb-form :model="formData" :rules="rules" ref="form">
                <jb-form-item
                    :label="$t('template.压缩包名')"
                    required
                    property="packageName">
                    <bk-input
                        v-model="formData.packageName"
                        :maxlength="40"
                        :placeholder="$t('template.压缩包名仅支持大小写英文、数字、- 或 _')" />
                </jb-form-item>
                <jb-form-item
                    :label="$t('template.密文变量值处理')"
                    required
                    property="secretHandler">
                    <bk-select
                        v-model="formData.secretHandler"
                        :clearable="false">
                        <bk-option :id="1" :name="$t('template.保存为空值')" />
                        <bk-option :id="2" :name="$t('template.保存真实值')" />
                    </bk-select>
                </jb-form-item>
                <jb-form-item
                    :label="$t('template.文件加密')"
                    required
                    property="isEncrypt">
                    <div class="encrypt-wraper">
                        <bk-radio-group v-model="formData.isEncrypt">
                            <bk-radio :value="1">{{ $t('template.是') }}</bk-radio>
                            <bk-radio :value="2">{{ $t('template.否') }}</bk-radio>
                        </bk-radio-group>
                    </div>
                </jb-form-item>
                <div v-show="isPasswordRequired">
                    <jb-form-item
                        :label="$t('template.密码设置')"
                        :required="isPasswordRequired"
                        property="password">
                        <bk-input
                            v-model="formData.password"
                            type="password"
                            v-bk-tooltips="htmlConfig"
                            :placeholder="$t('template.请设置6-20个字符密码')" />
                    </jb-form-item>
                    <jb-form-item
                        :label="$t('template.二次确认')"
                        :required="isPasswordRequired"
                        property="confirmPassword">
                        <bk-input
                            v-model="formData.confirmPassword"
                            type="password"
                            :placeholder="$t('template.请输入同样的密码，以确认密码准确')" />
                    </jb-form-item>
                </div>
                <jb-form-item
                    :label="$t('template.文件有效期')"
                    required
                    property="expireTime">
                    <bk-radio-group v-model="formData.expireTime" class="expire-time-box">
                        <bk-radio-button
                            v-for="item in expireTimeList"
                            :value="item.id"
                            :key="item.id">
                            {{ item.name }}
                        </bk-radio-button>
                    </bk-radio-group>
                </jb-form-item>
                <jb-form-item
                    v-if="formData.expireTime === 'custom'"
                    class="expire-time-custom"
                    label=" "
                    property="customNum">
                    <bk-input v-model="formData.customNum" :placeholder="$t('template.请输入整数，不可超过365')">
                        <template slot="append">
                            <div class="group-text">
                                <span class="text">{{ $t('template.天') }}</span>
                            </div>
                        </template>
                    </bk-input>
                </jb-form-item>
            </jb-form>
        </div>
        <div id="html-config-password" class="html-config-password">
            <div class="item" :class="{ active: passwordLengthResult }">{{ $t('template.长度6-20个字符') }}</div>
            <div class="item" :class="{ active: passwordFormatResult }">{{ $t('template.必须包含英文字母、数字和特殊符号') }}</div>
        </div>
        <div class="action-footer">
            <bk-button class="mr10" @click="handleCancel">{{ $t('template.取消') }}</bk-button>
            <bk-button class="mr10" @click="handleLast">{{ $t('template.上一步') }}</bk-button>
            <bk-button class="w120" theme="primary" :loading="isSubmiting" @click="handleNext">{{ $t('template.下一步') }}</bk-button>
        </div>
    </div>
</template>
<script>
    import I18n from '@/i18n';
    import BackupService from '@service/backup';
    import {
        getScriptName,
    } from '@utils/assist';
    import {
        taskExport,
    } from '@utils/cache-helper';

    export default {
        data () {
            this.rules = {};
            return {
                isSubmiting: false,
                formData: {
                    packageName: getScriptName(`bk_job_export_${window.PROJECT_CONFIG.APP_ID}`).slice(0, 40),
                    secretHandler: 1,
                    isEncrypt: 2,
                    password: '',
                    confirmPassword: '',
                    expireTime: 0,
                    customNum: null,
                },
            };
        },
        computed: {
            isPasswordRequired () {
                return this.formData.isEncrypt === 1;
            },
            passwordLengthResult () {
                return this.formData.password.length >= 6 && this.formData.password.length <= 20;
            },
            passwordFormatResult () {
                return !/^[A-Za-z0-9]*$/.test(this.formData.password);
            },
        },
        watch: {
            /**
             * @desc 文件加密时需要验证密码
             */
            'formData.isEncrypt': {
                handler (isEncrypt) {
                    const passwordRule = [
                        {
                            validator: (val) => {
                                if (!val) {
                                    return true;
                                }
                                if (val.length < 6 || val.length > 20) {
                                    return false;
                                }
                                return !/^[a-zA-Z0-9]*$/.test(val);
                            },
                            message: I18n.t('template.密码长度为6-20个字符，必须包含英文字母、数字和特殊符号'),
                            trigger: 'blur',
                        },
                    ];
                    const confirmPasswordRule = [
                        {
                            validator: val => this.formData.password === val,
                            message: I18n.t('template.两次输入的密码不一致'),
                            trigger: 'blur',
                        },
                    ];
                    if (isEncrypt === 1) {
                        passwordRule.unshift({
                            required: true,
                            message: I18n.t('template.密码必填'),
                            trigger: 'blur',
                        });
                        confirmPasswordRule.unshift({
                            required: true,
                            message: I18n.t('template.确认密码必填'),
                            trigger: 'blur',
                        });
                    }
                    if (this.$refs.form) {
                        this.$refs.form.clearError('password');
                        this.$refs.form.clearError('confirmPassword');
                    }
                    this.formData.password = '';
                    this.formData.confirmPassword = '';
                    this.rules.password = passwordRule;
                    this.rules.confirmPassword = confirmPasswordRule;
                },
                immediate: true,
            },
            /**
             * @desc 自定义文件有效期时对输入框的值进行验证
             */
            'formData.expireTime' () {
                if (this.formData.expireTime === 'custom') {
                    this.rules.customNum = [
                        {
                            required: true,
                            message: I18n.t('template.文件有效期必填'),
                            trigger: 'blur',
                        },
                        {
                            validator: val => val >= 1 && val <= 365,
                            message: I18n.t('template.文件有效期须大于1或不超过365'),
                            trigger: 'blur',
                        },
                    ];
                } else {
                    delete this.rules.customNum;
                }
            },
        },
        created () {
            this.expireTimeList = [
                { id: 0, name: I18n.t('template.永久') },
                { id: 1, name: I18n.t('template.1 天') },
                { id: 3, name: I18n.t('template.3 天') },
                { id: 7, name: I18n.t('template.7 天') },
                { id: 'custom', name: I18n.t('template.自定义') },
            ];
            this.htmlConfig = {
                allowHtml: true,
                width: 250,
                trigger: 'click',
                theme: 'light',
                content: '#html-config-password',
                placement: 'right-start',
            };
            this.rules = Object.assign(this.rules, {
                packageName: [
                    {
                        required: true,
                        message: I18n.t('template.压缩包名必填'),
                        trigger: 'blur',
                    },
                    {
                        validator: val => /^[A-Za-z0-9_-]*$/.test(val),
                        message: I18n.t('template.压缩包名仅支持大小写英文、数字、- 或 _'),
                        trigger: 'blur',
                    },
                ],
                secretHandler: [
                    {
                        required: true,
                        message: I18n.t('template.密文变量值处理必填'),
                        trigger: 'blur',
                    },
                ],
                isEncrypt: [
                    {
                        required: true,
                        message: I18n.t('template.文件加密必填'),
                        trigger: 'blur',
                    },
                ],
                expireTime: [
                    {
                        required: true,
                        message: I18n.t('template.文件有效期必填'),
                        trigger: 'blur',
                    },
                ],
            });
        },
        methods: {
            handleCancel () {
                this.$emit('on-cancle');
            },
            handleLast () {
                this.$emit('on-change', 2);
            },
            handleNext () {
                const templateInfo = taskExport.getItem('templateInfo');
                if (!templateInfo) {
                    return;
                }
                this.isSubmiting = true;
                this.$refs.form.validate()
                    .then(() => {
                        const { packageName, password, secretHandler, expireTime, customNum } = this.formData;
                        return BackupService.export({
                            packageName,
                            password,
                            secretHandler,
                            expireTime: expireTime === 'custom' ? parseInt(customNum, 10) : expireTime,
                            templateInfo,
                        }).then((data) => {
                            window.changeAlert = false;
                            taskExport.setItem('id', data.id);
                            this.$emit('on-change', 4);
                        });
                    })
                    .finally(() => {
                        this.isSubmiting = false;
                    });
            },
        },
    };
</script>
<style lang="postcss">
    .export-task-step3-page {
        .form {
            display: flex;
            justify-content: center;
            padding-top: 60px;

            .encrypt-wraper {
                display: flex;
                align-items: center;
                height: 100%;
            }

            .expire-time-box {
                .bk-radio-button-text {
                    width: 93px;
                }
            }

            .expire-time-custom {
                position: relative;
                right: 0;
            }
        }

        .bk-form-radio {
            margin-right: 28px;
        }

        .group-text {
            position: relative;
            width: 87px;
            overflow: unset !important;
            text-align: center;

            &::before {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                background: #f5f7fa;
                content: '';
            }

            &::after {
                position: absolute;
                top: -5px;
                left: 50%;
                width: 11px;
                height: 11px;
                background: #f5f7fa;
                border-top: 1px solid #c4c6cc;
                border-right: 1px solid #c4c6cc;
                content: '';
                transform: translateX(-50%) rotateZ(-45deg);
            }

            .text {
                position: relative;
                z-index: 1;
            }
        }
    }

    .html-config-password {
        .item {
            &::before {
                display: inline-block;
                width: 8px;
                height: 8px;
                margin-right: 10px;
                background-color: #ccc;
                border-radius: 50%;
                content: '';
            }

            &.active {
                &::before {
                    background-color: #3fc06d;
                }
            }
        }
    }
</style>
